My First GUI

Much of the user friendly software we see today has a graphical user interface (GUI, pronounced gooey). This is the windows desktop that we have become familiar with. If we supply a GUI, users can click on buttons and enter text into boxes for input. The steps below will help you to write your first GUI.

As our first example, we will write a GUI for the very simple add5 function, which just adds 5 to whatever number you give it.

1. Start Microsoft Visual C++ 6.0.

2. On menu bar click on File and then, click on New. The New dialog box should be visible on the screen.

Click on the Projects tab in the dialog window and select MFC AppWizard(exe). Fill in project name, In the picture above we called the project my add 5 calculator. Click on the OK button.

3. Select dialog based. Click Next button.

4. Uncheck the About box. Click Finish button. On the next screen select OK.

5. If the controls menu bar is in your way you can drag it to where it is less obtrusive. On the menu bar click on Edit, then Select All. All the buttons on the GUI panel will be selected. Press the Delete key on the keyboard to delete all of them. You can also delete them one by one by clicking each of them, then press delete key.

Boxes have been selected by pressing Edit -> Select All

Boxes have been deleted.

6. Now we have a clean slate. Let’s see what we want to add to our GUI.

Let’s assume the original add5 function looked something like this:

void add5 (int num)

{

int sum;

num = n + 5;

cout << "Five added to "

<< num << " is " << sum << endl;

}

We want to add two edit boxes.

One will be used to input num

The other will be used to output sum.

Drag and drop two edit boxes onto your GUI panel as shown. The edit box looks like: .

7.. Now we want to add 1 button to our GUI panel. We will click on this button when we want to tell the program to start the calculation.

Drag 1 button onto your GUI panel. The button looks like: .

8. It’s helpful to prompt the user indicating where they should type the input. We will use a static text box to show the prompt.

The static text box looks like this

Drag a static text box onto your GUI panel.

You can change drag the edges to enlarge it and then right click on it, select properties, and change it’s caption to read, "Type in a number:". You may have to adjust the edges again to fit the text.

9. Right mouse click on the button on your GUI panel, click properties in the menu.

In the Caption text window, type a name to a more meaningful identifier, such as Calculate for this program. Then close the dialog box.

10. Right mouse click anywhere inside the panel.

Select Class Wizard. You will have the Wizard window.

Click the Member Variables tab.

11. Double click the IDC_BUTTON1 variable in the Control IDs sub-window. You will then get a pop-up window titled Add Member Variable. Type a more meaningful name for this variable, such as calculate, since that is the function for this button. Click on OK.

12. Repeat for each edit box, adding member variable num for IDC_EDIT1, and sum for IDC_EDIT2. Make sure you change the data types of each of these to int. Click OK button.

13. Double click on the calculate button, a pop-up window named Add Member Function will show up. Change the name to more meaningful function name, such as add5.

14. Double click on the calculate button to go to the source code.

A member function named add5 ( ) will show up. Add the following statements so that the function looks like this:

void CMyadd5calculatorDlg::add5()

{

// TODO: Add your control notification handler code here

UpdateData(TRUE); // To input value from the edit box.

sum = num + 5;

UpdateData(FALSE); // To output value to the edit box.

}

15. Compile and Run your program in the usual manner.